<script setup>
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import bus from "@/utils/bus.js";
import api from "@/api";
console.log(api);
import { onMounted, onUnmounted, ref } from "vue";

const info = ref({
  deviceName: "",
  addressName: "",
  dicmSignalhList: [],
});
const show = ref(true);
const cabinetId = ref("");
const DeviceUEID = async (e) => {
  info.value = {};
  cabinetId.value = e;
  if (e) {
    const res = await api.getInfoByDevUeid({ cabinetId: e });
    const data = res?.data ?? {};
    info.value = { ...data, dicmSignalhList: data?.dicmSignalhList ?? [] };
  }
};
const ShowUe = () => {
  if (info.value?.addressName) {
    info.value = {};
  }
};

onMounted(() => {
  cabinetId.value = "";
  bus.on("DeviceUEID", DeviceUEID);
  // bus.on("ShowUe", ShowUe);
});
onUnmounted(() => {
  cabinetId.value = "";
  bus.off("DeviceUEID", DeviceUEID);
  // bus.off("ShowUe", ShowUe);
});
</script>

<template>
  <div class="com-full dev-info-box" v-if="info.addressName && show">
    <div class="panel-box">
      <div class="title">设备信息</div>
      <div class="content">
        <div class="item-title">基本信息</div>
        <div class="info-item">
          <div class="label">设备名称：</div>
          <div class="value">{{ info.deviceName ?? "--" }}</div>
        </div>
        <div class="info-item">
          <div class="label">所属机房：</div>
          <div class="value">{{ info.addressName ?? "--" }}</div>
        </div>
        <div class="item-title">其他信息</div>
        <div class="oth-info">
          <div class="info-item" v-for="(item, idx) of info.dicmSignalhList" :key="idx">
            <div class="label">{{ item.signalName }}</div>
            <div class="value">
              {{ item.dataValue ?? "--" }}
              {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="C-icon">
      <CloseCircleOutlined @click="ShowUe" :style="{ fontSize: '50px', color: '#fff' }" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.dev-info-box {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
}
.C-icon {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  pointer-events: all;
}
.panel-box {
  width: 700px;
  height: 730px;
  background-image: url(/imgs/7.png);
  background-size: 100% 100%;
  pointer-events: all;

  .title {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    text-indent: 2rem;
    color: #fff;
  }

  .content {
    width: 100%;
    height: 90%;
    color: #fff;
    box-sizing: border-box;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .info-item {
      font-style: italic;
      display: flex;
      gap: 10px;
      .label {
        color: #7dc0f1;
      }
      .value {
        color: #fff;
      }
    }

    .item-title {
      line-height: 2rem;
      background-image: linear-gradient(90deg, rgba(215, 241, 246, 0.5), transparent);
      display: flex;
      align-items: center;
      &::before {
        content: "";
        display: inline-block;
        height: 100%;
        width: 10px;
        background-color: rgb(70, 247, 241);
        margin-right: 10px;
      }
    }

    .oth-info {
      flex: 1;
      min-height: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }
}
</style>
